<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选反选</title>
</head>
<body>
    请选择你的巨人之力：<br>
    <input type="checkbox" class="titan" />始祖巨人<br>
    <input type="checkbox" class="titan" />进击的巨人<br>
    <input type="checkbox" class="titan" />女巨人<br>
    <input type="checkbox" class="titan" />鄂之巨人<br>
    <input type="checkbox" class="titan" />铠之巨人<br>
    <input type="checkbox" class="titan" />超大型巨人<br>
    <input type="checkbox" class="titan" />兽之巨人<br>
    <input type="checkbox" class="titan" />车力巨人<br>
    <input type="checkbox" class="titan" />战锤巨人<br>
    <button id="btn1">我全都要</button>
    <button id="btn2">我要驱逐世界上的所有巨人</button>
    <button id="btn3">什么废物巨我要其他的</button>
</body>
<script>
    let btn1Ele = document.getElementById("btn1");
    let btn2Ele = document.getElementById("btn2");
    let btn3Ele = document.getElementById("btn3");
    let titanEles = document.querySelectorAll(".titan");
    // 全选
    btn1Ele.addEventListener("click" , () => {
        [...titanEles].forEach((titanEle) => {
            titanEle.checked = true;
        });
    });
    // 全不选
    btn2Ele.addEventListener("click" , () => {
        [...titanEles].forEach((titanEle) => {
            titanEle.checked = false;
        });
    });
    // 反选
    btn3Ele.addEventListener("click" , () => {
        [...titanEles].forEach((titanEle) => {
            titanEle.checked = !titanEle.checked;
        });
    });
</script>
</html>